<script lang="ts">
    import TimePane from "./TimePane.svelte";

    const { header, footer, ...props } = $props();
    const val1 = $derived(props.value?.[0]);
    const val2 = $derived(props.value?.[1]);
</script>

<TimePane {...props} value={val1} header={header[0]} footer={footer && footer.length && footer[0]} name="start" />
<TimePane {...props} value={val2} header={header[1]} footer={footer && footer.length && footer[1]} name="end" />
